<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ESP32 LED控制面板</title>
    <!-- 引入Element Plus的CSS样式 -->
    <link rel="stylesheet" href="/css/element-plus.css">
    <!-- 引入Vue 3和Element Plus的JavaScript库 -->
    <script src="/js/vue.min.js"></script>
    <script src="/js/element-plus.js"></script>
    <!-- 引入Axios用于HTTP请求 -->
    <script src="/js/axios.min.js"></script>
    <style>
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            text-align: center;
        }
        .led-container {
            margin: 40px auto;
            width: 200px;
            height: 200px;
            position: relative;
        }
        .led {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #ccc;
            box-shadow: 0 0 20px #ccc;
            transition: all 0.3s ease;
        }
        .led.on {
            background-color: #ffeb3b;
            box-shadow: 0 0 50px #ffeb3b;
        }
        .title {
            margin-bottom: 30px;
            color: #409EFF;
        }
        .button-group {
            margin-top: 30px;
        }
        .device-select {
            margin-bottom: 20px;
            width: 300px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1 class="title">ESP32 LED控制面板</h1>
            <el-select 
                v-model="selectedDevice" 
                placeholder="请选择设备" 
                class="device-select"
                @change="handleDeviceChange">
                <el-option
                    v-for="device in devices"
                    :key="device"
                    :label="device"
                    :value="device">
                </el-option>
            </el-select>
            <div class="led-container">
                <div class="led" :class="{ 'on': isLedOn }"></div>
            </div>
            <div class="button-group">
                <el-button 
                    type="primary" 
                    @click="toggleLed(true)" 
                    :disabled="isLedOn || !selectedDevice">
                    打开LED
                </el-button>
                <el-button 
                    type="danger" 
                    @click="toggleLed(false)" 
                    :disabled="!isLedOn || !selectedDevice">
                    关闭LED
                </el-button>
            </div>
        </div>
    </div>

    <script>
        // 创建Vue应用实例
        const { createApp, ref, onMounted, onUnmounted } = Vue;
        const { ElMessage, ElLoading } = ElementPlus;
        const app = createApp({
            setup() {
                // 响应式状态定义
                const devices = ref([]);           // 已连接设备列表
                const selectedDevice = ref('');     // 当前选中的设备
                const isLedOn = ref(false);         // LED状态标志
                let deviceListTimer = null;         // 设备列表刷新定时器

                /**
                 * 获取已连接的设备列表
                 * 通过HTTP GET请求从服务器获取当前连接的ESP32设备列表
                 */
                const getDevices = async () => {
                    try {
                        const response = await axios.get('/test/getDevices');
                        devices.value = response.data.data;
                        
                        // 如果当前选中的设备不在设备列表中，清除选择
                        if (selectedDevice.value && !devices.value.includes(selectedDevice.value)) {
                            selectedDevice.value = '';
                            isLedOn.value = false;
                        }
                    } catch (error) {
                        console.error('获取设备列表失败:', error);
                        ElementPlus.ElMessage.error('获取设备列表失败');
                    }
                };

                /**
                 * 切换LED状态
                 * @param {boolean} state - LED的新状态（true为开启，false为关闭）
                 */
                const toggleLed = (state) => {
                    isLedOn.value = state;
                    sendCommand(state ? 'on' : 'off');
                };

                /**
                 * 发送控制命令到ESP32设备
                 * @param {string} cmd - 要发送的命令（'on'或'off'）
                 */
                const sendCommand = async (cmd) => {
                    if (!selectedDevice.value) {
                        ElementPlus.ElMessage.warning('请先选择设备');
                        return;
                    }

                    // 发送命令前显示加载提示
                    const loading = ElementPlus.ElLoading.service({
                        lock: true,
                        text: `正在${cmd === 'on' ? '打开' : '关闭'}LED...`,
                        background: 'rgba(0, 0, 0, 0.7)'
                    });

                    try {
                        const response = await axios.post('/test/sendMsg', {
                            cmd: cmd,
                            clientId: selectedDevice.value
                        });

                        if (response.data.code === 200) {
                            ElementPlus.ElMessage.success(`LED${cmd === 'on' ? '已成功打开' : '已成功关闭'}`);
                        } else {
                            ElementPlus.ElMessage.error(`LED${cmd === 'on' ? '打开' : '关闭'}失败：${response.data.msg || '未知错误'}`);
                            // 如果失败，恢复LED状态
                            isLedOn.value = !isLedOn.value;
                        }
                    } catch (error) {
                        console.error('发送命令失败:', error);
                        ElementPlus.ElMessage.error(`控制LED失败：${error.message || '网络错误'}`);
                        // 如果失败，恢复LED状态
                        isLedOn.value = !isLedOn.value;
                    } finally {
                        // 关闭加载提示
                        loading.close();
                    }
                };

                /**
                 * 处理设备选择变化事件
                 * 当用户选择不同的设备时，重置LED状态
                 */
                const handleDeviceChange = () => {
                    isLedOn.value = false;
                };

                /**
                 * 组件挂载时的初始化操作
                 * 1. 立即获取一次设备列表
                 * 2. 设置定时器定期刷新设备列表
                 */
                onMounted(() => {
                    getDevices();
                    // 每5秒刷新一次设备列表
                    deviceListTimer = setInterval(getDevices, 5000);
                });

                /**
                 * 组件卸载时的清理操作
                 * 清除定时器，防止内存泄漏
                 */
                onUnmounted(() => {
                    if (deviceListTimer) {
                        clearInterval(deviceListTimer);
                    }
                });

                // 返回需要在模板中使用的状态和方法
                return {
                    devices,
                    selectedDevice,
                    isLedOn,
                    toggleLed,
                    handleDeviceChange
                };
            }
        });

        // 使用Element Plus组件库
        app.use(ElementPlus);
        // 挂载Vue应用到DOM
        app.mount('#app');
    </script>
</body>
</html>
